<template>
	<view>
		<navbar :tip="tip" title="查成绩" :isback="true"></navbar>
		<view class="sousuo">
			<u-search placeholder="请输入学校名称" height='60rpx' bgColor='#fff' placeholderColor='#C6C6C6'
				v-model="keyword"></u-search>
		</view>
		<view class="con">
			<view class="box"
				:style="{height:'calc(100vh - 44px - 60rpx - 16rpx - '+bheight+')'}">
				<view class="u-flex u-flex-y-center box__tab">
					<view class="u-flex u-flex-y-center" v-for="(item,index) in tablist" :key="index"
						@click="curtab==index">
						<view class="box__sx" :class="curtab==index?'active':''">
							{{item.name}}
						</view>
						<image class="box__sx__icon" :src="'/static/cxx/Polygon_'+item.icon+'.png'" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(100% - 90rpx);">
					<view class="list">
						<view class="item" v-for="(item,index) in 10" :key="index">
							<image src="" class="item__pic" mode=""></image>
							<view class="item__name">
								2025东莞中考成绩查询入口网站
							</view>
							<image src="/static/cxx/Vector.png" class="item__more" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<image src="/static/cxx/Group_2235.png" class="fx" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				tablist: [{
						name: '全部',
						icon:5
					},
					{
						name: '省市',
						icon:6
					},
				],
				curtab: 0,
				tip:''
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3122.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		padding: 40rpx 0 90rpx 64rpx;
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 46rpx;
		color: #000000;
		line-height: 40rpx;
		position: relative;

		&__bg {
			width: 192.75rpx;
			height: 196.18rpx;
			position: absolute;
			top: 0;
			right: 118rpx;
		}
	}

	.sousuo {
		padding: 0 40rpx;
		position: relative;
		margin-bottom: 10rpx;

		/deep/.u-search__action {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #747474;
			line-height: 40rpx;
		}
	}

	.box {
		background: #F1F8FC;
		border-radius: 57rpx 57rpx 0rpx 0rpx;

		&__tab {
			height: 90rpx;
			padding: 0 55rpx;
		}

		&__sx {
			padding: 0 20rpx;
			height: 34rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 2rpx solid #93B8F9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #93B8F9;
			line-height: 40rpx;
			
			&__icon{
				margin-right: 35rpx;
				width: 21.3rpx;
				height: 17.55rpx;
				margin-left: 5rpx;
			}
		}

		.active {
			height: 38rpx;
			background: #84b1ff;
			color: #fff;
		}
	}

	.con {
		padding: 0 24rpx;
	}
	.list{
		padding: 0 22rpx 30rpx;
		.item{
			background: #FFFFFF;
			box-shadow: 6rpx 8rpx 8rpx 0rpx #DEE2FF;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			margin-bottom: 7rpx;
			display: flex;
			height: 122.14rpx;
			display: flex;
			align-items: center;
			padding: 0 53rpx 0 20rpx;
			&__pic{
				width: 92rpx;
				height: 92rpx;
				background: #E4E4E4;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			&__name{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #000000;
				line-height: 40rpx;
				flex: 1;
			}
			&__more{
				width: 17.18rpx;
				height: 32.44rpx;
			}
		}
	}
	
	.fx{
		width: 91.6rpx;
		height: 91.6rpx;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
	}
</style>